import { useEffect } from 'react';
import { Modal, Form, Input } from 'antd';

const userModal = (props) => {
  const { visible, record, closeHandler, finish } = props;
  const [form] = Form.useForm();
  useEffect(() => {
    if (record === undefined) {
      form.resetFields();
    } else {
      form.setFieldsValue(record);
    }
  }, [visible]);

  const onOk = () => {
    console.log('ok');
    form.submit();
  };

  return (
    <div>
      <Modal title='Basic Model' visible={visible} onOk={onOk}
             onCancel={closeHandler} forceRender>
        <Form
          name='basic'
          form={form}
          onFinish={finish}
        >
          <Form.Item
            label='Name'
            name='name'
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='Email'
            name='email'
          >
            <Input />
          </Form.Item>
          <Form.Item
            label='Status'
            name='status'
          >
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default userModal;
